<template>
  <view>
    <view class="songDetailContainer" id="demo">
      <image :src="ControlList[indexList].al.picUrl" class="background"></image>
      <!-- 顶部区域 -->

      <view class="topContainer">
        <uni-notice-bar speed=20 scrollable color="#fff" single background-color="rgb(85 0 0 / 0%)"
          :text="ControlList[indexList].al.name">
        </uni-notice-bar>
        <view class="title">
          <text class="songName">{{ControlList[indexList].name}}</text>
          <text class="author">{{ControlList[indexList].ar[0].name}}</text>
        </view>
        <!-- <uni-icons type="undo" color="white" size="30"></uni-icons> -->
      </view>
      <!-- 中间区域 -->
      <view>
        <view class="centerContainer" v-if="isShowlyric" @click="isShowlyrics">
          <image src="/static/image/song/needle.png" :class="[isneedle?'needle-active':'needle ']" />
          <image class="disc" src="/static/image/song/disc.png" />
          <image class="musicImg discAnimation"
            :class="{'image_discAnimation_paused':!isneedle,'.image_discAnimation_run':isneedle}"
            :src="ControlList[indexList].al.picUrl" />
        </view>
        <!-- 歌词部分 -->
        <view class="scrollContainer" v-else>
          <scroll-view :scroll-top="scrollTop" scroll-y class="Showlyric" @click="isShowlyrics"
            scroll-with-animation="true" show-scrollbar="false">
            <text v-for="(item,i) in lyric" :key="i"
              :class="[item.timer<parseInt(currentTime * 1000)&&parseInt(currentTime * 1000)<item.pre?'active':'lyric']">
              {{item.lrc}}
            </text>
          </scroll-view>
        </view>

      </view>

      <!-- 底部区域 -->
      <view class="buttomContainer">
        <!-- 第一排icon -->
        <view class="buttomContainerfirst">
          <image class="heart" src="/static/image/tabs/聚收藏.png" v-if="true"></image>
          <image class="heart" src="/static/image/tabs/聚收藏gift.png" v-else></image>
          <image class="songIcon" src="/static/image/tabs/已唱.png"></image>
          <image class="loadIcon" src="/static/image/tabs/下载-文件下载-07.png"></image>
          <image class="comment" src="/static/image/tabs/评论.png" @click="commentList"></image>
        </view>
        <!-- 播放进度条 -->
        <view class="buttomContainerSeond">
          <!-- 当前时间 -->
          <view class="current-Time">{{currentMin+':'+currentsec}}</view>
          <view class="slider-wraper">
            <!-- value是当前的长度 max是总长度 然后这就是百分比 -->
            <slider activeColor="#ff1741" backgroundColor="#ffffff" block-size="15" block-color="#e90000"
              :value="currentTime" :max="durationTime" @change="changing" />

          </view>
          <!-- 总长 -->
          <view class="duration-Time">
            {{durationtMin+':'+durationtsec}}
          </view>
        </view>
        <!-- 第三排 -->
        <view class="buttomContainerthird">
          <image src="/static/image/tabs/24gl-repeat2.png" v-if="true"></image>
          <image src="/static/image/tabs/24gl-repeatOnce2.png" v-else></image>
          <image src="/static/images/prev.png" @click="tapsub"></image>
          <!-- 暂停 -->
          <image class="play" src="/static/images/play-white.png" v-if="!isPlayPage" @click="clickisPlayPage"></image>
          <!--  播放 -->
          <image src="/static/images/stop.png" v-else @click="clickisPlayPage"></image>
          <image src="/static/images/next.png" @click="tapadd"></image>
          <image src="/static/image/tabs/24gf-playlistMusic2.png"></image>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import buttomControl from './@/components/buttom-control/buttom-control.vue'
  // 实例需定义在外面在能使用
  const innerAudioContext = uni.createInnerAudioContext()
  export default {
    computed: {
      // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
      ...mapState('musicDetailList', ['indexList', 'ControlList']),
      ...mapState('musicPage', ['isPlayPage', 'currentTime', 'durationTime', 'scrollTop']),
    },
    data() {
      return {
        isneedle: true,
        isShowlyric: true,
        lyric: [],
        currentMin: null,
        currentsec: null,
        durationtMin: null,
        durationtsec: null,
        lyricsIndex: 0
      }
    },
    onLoad() {
      this.getlyrucApi()
    },

    watch: {
      // item.timer<=currentTime*1000&&currentTime*1000<=item.pre?'active':'lyric'
      // 监听时间的改变
      currentTime() {

        // 获取歌词列表的索引

        // if (this.lyric[this.lyricsIndex].timer <= this.currentTime * 1000 && this.currentTime * 1000 <=
        //   this.lyric[this.lyricsIndex].pre) {
        //   this.lyricsIndex = lyricsIndex + 1
        // }

        // 动态让歌词在屏幕中间显示
        if (!this.isShowlyric) {
          let query = uni.createSelectorQuery().in(this);
          query.select('.active').boundingClientRect(data => {
            // console.log('元素距离顶部的距离' + parseInt(data.top))
            if (parseInt(data.top) > 180) {
              this.$store.commit('musicPage/scrollTop', this.scrollTop + parseInt(data.top) - 180)
            }
          }).exec();
        }

        // 获取当前时间和总时间
        // 把当前时间转为秒和分  Math.floor向下取整

        let currentMin = Math.floor(this.currentTime / 60)
        // 取与就是秒
        let currentsec = Math.floor(this.currentTime % 60)
        // console.log(currentMin, currentsec)
        // 获取总时间的秒与分
        let durationtMin = Math.floor(this.durationTime / 60)
        // 取与就是秒
        let durationtsec = Math.floor(this.durationTime % 60)
        // 给时间加0如果未满10秒
        if (currentMin < 10) {
          currentMin = '0' + currentMin
        }
        if (currentsec < 10) {
          currentsec = '0' + currentsec
        }
        if (durationtMin < 10) {
          durationtMin = '0' + durationtMin
        }
        if (durationtsec < 10) {
          durationtsec = '0' + durationtsec
        }
        this.currentMin = currentMin
        this.currentsec = currentsec
        this.durationtMin = durationtMin
        this.durationtsec = durationtsec
        // console.log(this.currentMin + '-----' + this.currentsec + '----' + this.durationtMin + '-----' + this
        //   .durationtsec)
      },
      // 监听磁盘的改变
      indexList() {
        // this.isneedle = this.isPlayPage
        this.isneedle = false
        const timer = setTimeout(() => {
          this.isneedle = true
          clearTimeout(timer)
        }, 1000)
        // 获取歌词
        this.getlyrucApi()
      },
      isPlayPage() {
        this.isneedle = this.isPlayPage
      }
    },
    methods: {
      // 跳转到评论区
      commentList() {
        uni.navigateTo({
          url: '/subpkg/comment_List/comment_List?musicid=' + this.ControlList[this.indexList].id
        })
      },
      // 进度条时间的拖拽
      changing(e) {
        // console.log(e.detail.value)
        // 拖拽后的值
        this.$store.commit('musicPage/changingTime', e.detail.value)

      },
      // 是否显示歌词区域
      isShowlyrics() {
        this.isShowlyric = !this.isShowlyric
      },
      // 实现的逻辑是底部控制按钮和播放按钮需要同步
      clickisPlayPage() {
        // 现在isplay是true在播放所以要暂停
        if (this.isPlayPage) {
          this.$store.commit('musicPage/isPlay', false)
          buttomControl.methods.clickisPlayPageFlase(false)
        } else {
          // 现在isPlay是false所以要开启
          // 
          this.$store.commit('musicPage/isPlay', true)
          buttomControl.methods.clickisPlayPageTrue(true)
        }
      },
      // 点击减号我们要减一
      tapsub() {
        this.$store.commit('musicDetailList/tapSub')
      },
      // 点击下一首歌加一
      tapadd() {
        this.$store.commit('musicDetailList/tapAdd')
      },
      // 获取歌词请求接口
      async getlyrucApi() {
        const {
          data: res
        } = await uni.$http.get('/lyric?id=' + this.ControlList[this.indexList].id)
        console.log(res)
        if (!res) {
          return uni.$showMsg()
        }
        // 处理歌曲的把字符串转换为数组里面包含{min,sec,mill,lrc}对象
        if (res.lrc.lyric) {
          let arrList = res.lrc.lyric.split(/[(\r\n)\r\n]+/)
          let arr = arrList.map((item, i) => {
            // slice截取数组(包头不包尾)
            let min = item.slice(1, 3)
            let sec = item.slice(4, 6)
            var mill = item.slice(7, 10)
            var lrc = item.slice(11, item.length)
            let timer = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
            // console.log(Number(mill)) /
            // 如果其他类型转为number会是NaN
            // 如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
            if (isNaN(Number(mill))) {
              var mill = item.slice(7, 9)
              // console.log(mill)
              var lrc = item.slice(10, item.length)
              timer = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)

            }
            return {
              min,
              sec,
              mill,
              lrc,
              timer
            }
          })
          // console.log(arr)
          arr.pop();
          if (arr) {
            arr.forEach((item, i) => {
              if (arr.length - 1 === i) {
                item.pre = 0
              } else {
                item.pre = arr[i + 1].timer
              }
            })
          }
          this.lyric = arr
          // console.log(this.lyric)
        }
      },

    }
  }
</script>

<style>
  .buttomContainerSeond {
    display: flex;
    align-items: center;
    position: absolute;
    top: 83%;
    left: 4%
  }

  .slider-wraper {
    width: 542rpx;

  }


  .active {
    color: #fefefe;
    font-size: 40rpx;
    margin-bottom: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 设置对齐模式 */
    -webkit-box-orient: vertical;
    /* 设置盒子的行数 */
    -webkit-line-clamp: 1;
  }


  .Showlyric {
    height: 700rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

  }

  .lyric {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fefefe;
    font-size: 27rpx;
    margin-bottom: 40rpx;

    opacity: 0.6;


  }

  .buttomContainerfirst {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 75%;
    background-color: aqua;
    left: 6%;

  }

  uni-notice-bar {
    position: absolute;
    width: 180rpx;
    top: 9%;
    left: 6%;

  }

  .buttomContainerthird {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 91%;
    background-color: black;
    left: 5%;
  }

  .buttomContainerthird image {
    margin: 0 40rpx 0;
    height: 50rpx;
    width: 50rpx;
  }

  .buttomContainerthird .play {
    height: 90rpx;
    width: 90rpx;
  }

  .buttomContainerfirst image {
    margin: 0 58rpx 0;
    height: 50rpx;
    width: 50rpx;
  }

  .songDetailContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
  }

  .topContainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 125rpx;
  }

  .centerContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
  }

  .background {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1000;
    filter: blur(100px) brightness(70%);
  }

  .title {
    display: flex;
    margin-top: -10rpx;
    flex-direction: column;
    align-items: center;


  }

  .title text {
    margin: 4px 10rpx;

  }

  .songName {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 设置对齐模式 */
    -webkit-box-orient: vertical;
    /* 设置盒子的行数 */
    -webkit-line-clamp: 1;
    font-size: 37rpx;
    color: #fefefe;
  }

  .author {
    color: rgba(255, 255, 255, 0.3);
    font-size: 22rpx;
  }

  .needle {
    position: relative;

    left: 116rpx;
    width: 265rpx;
    height: 181rpx;
    transform-origin: 14rpx 14rpx;
    transform: rotate(5deg);
    z-index: 100;
    transition: transform 0.8s;
  }

  .needle-active {
    position: relative;
    left: 116rpx;
    width: 265rpx;
    height: 181rpx;
    transform-origin: 14rpx 14rpx;
    transform: rotate(24deg);
    z-index: 100;
    transition: transform 0.8s;
  }

  .needleRotate {
    transform-origin: 14rpx 14rpx;
    transform: rotate(22deg);
  }

  .discContainer {
    width: 75vw;
    height: 75vw;
    /* transform-origin: 0 -50%; */
  }

  /* 碟子设置旋转动画 */
  .discAnimation {

    /* infinite动画无限循环 */
    animation: disc 25s linear infinite;
    /* 动画延迟一秒 */
    animation-delay: 0.8s;
  }

  .image_discAnimation_run {
    animation-play-state: running;
  }

  .image_discAnimation_paused {
    animation-play-state: paused;
  }

  @keyframes disc {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }



  /*
     @keyframes设置动画帧
    1) from to 
        适用于简单的动画，只有起始帧和结束帧
    2) 百分比
        多用于复杂的动画，通常不止两帧
*/
  .musicImg {
    position: absolute;
    top: 27%;
    z-index: -1000;
    border-radius: 50%;
    width: 59%;

  }

  .disc {
    width: 18rem;
    height: 18rem;
    bottom: 2.3rem;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
</style>
